<template>
  <master title="章节列表">
    <div class="searchForm">
      <div class="searchFormInputs">
        <el-input class="searchFormInput" v-model="params.title" placeholder="按照章节类型查找"></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
      <div class="searchFormBtn">
        <el-button type="success" icon="el-icon-plus" @click="edit()">增加</el-button>
      </div>
    </div>
    <div class="el-table">
      <el-table :data="rows" stripe style="width: 100%;">
        <!-- <el-table-column prop="id" label="ID">
        </el-table-column> -->
        <el-table-column fixed="left" prop="name" label="章节名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="type" label="类型" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="major" label="专业" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="introduce" label="介绍" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="classHour" label="课时">
        </el-table-column>
        <el-table-column prop="parent_id" label="父节点id">
        </el-table-column>
        <!-- <el-table-column prop="courseId" label="课程id">
        </el-table-column> -->
        <el-table-column prop="remark" label="备注" show-overflow-tooltip>
        </el-table-column>
        <!-- <el-table-column prop="status" label="状态">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column prop="createBy" label="创建人">
        </el-table-column>
        <el-table-column prop="createTimeString" label="创建时间字符串">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间">
        </el-table-column>
        <el-table-column prop="updateTimeString" label="更新时间字符串">
        </el-table-column>
        <el-table-column prop="state" label="删除逻辑">
        </el-table-column>
        <el-table-column prop="updateBy" label="更新人">
        </el-table-column>
        <el-table-column prop="unitId" label="数据隔离字段">
        </el-table-column> -->
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-edit" @click="delet(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="'修改章节'" :visible.sync="visible">
      <el-form ref="editForm" :model="editForm">
        <!-- <el-form-item label="ID">
          <el-input v-model="editForm.id" placeholder="ID" ></el-input>
        </el-form-item> -->
        <el-form-item label="chapterName">
          <el-input v-model="editForm.chapterName" placeholder="章节名称"></el-input>
        </el-form-item>
        <el-form-item label="type">
          <el-input v-model="editForm.type" placeholder="类型"></el-input>
        </el-form-item>
        <el-form-item label="major">
          <el-input v-model="editForm.major" placeholder="专业"></el-input>
        </el-form-item>
        <el-form-item label="introduce">
          <el-input v-model="editForm.introduce" placeholder="介绍"></el-input>
        </el-form-item>
        <el-form-item label="classHour">
          <el-input v-model="editForm.classHour" placeholder="课时"></el-input>
        </el-form-item>
        <el-form-item label="parentId">
          <el-input v-model="editForm.parentId" placeholder="父节点id"></el-input>
        </el-form-item>
        <!-- <el-form-item label="courseId">
          <el-input v-model="editForm.courseId" placeholder="课程id" ></el-input>
        </el-form-item> -->
        <el-form-item label="remark">
          <el-input v-model="editForm.remark" placeholder="备注"></el-input>
        </el-form-item>
        <!-- <el-form-item label="status">
          <el-input v-model="editForm.status" placeholder="状态" ></el-input>
        </el-form-item>
        <el-form-item label="createTime">
          <el-input v-model="editForm.createTime" placeholder="创建时间" ></el-input>
        </el-form-item>
        <el-form-item label="createBy">
          <el-input v-model="editForm.createBy" placeholder="创建人" ></el-input>
        </el-form-item>
        <el-form-item label="createTimeString">
          <el-input v-model="editForm.createTimeString" placeholder="创建时间字符串" ></el-input>
        </el-form-item>
        <el-form-item label="updateTime">
          <el-input v-model="editForm.updateTime" placeholder="更新时间" ></el-input>
        </el-form-item>
        <el-form-item label="updateTimeString">
          <el-input v-model="editForm.createTimeString" placeholder="更新时间字符串" ></el-input>
        </el-form-item>
        <el-form-item label="state">
          <el-input v-model="editForm.state" placeholder="删除逻辑" ></el-input>
        </el-form-item>
        <el-form-item label="updateBy">
          <el-input v-model="editForm.updateBy" placeholder="修改人" ></el-input>
        </el-form-item>
        <el-form-item label="unitId">
          <el-input v-model="editForm.unitId" placeholder="数据隔离字段" ></el-input>
        </el-form-item> -->
        <el-form-item style="text-align: right;">
          <el-button type="primary" @click="visible = false">取消</el-button>
          <el-button type="danger" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :title="'新增章节'" :visible.sync="visibleadd">
      <el-form ref="editForm" :model="editForm">
        <!-- <el-form-item label="ID">
          <el-input v-model="editForm.id" placeholder="ID" ></el-input>
        </el-form-item> -->
        <div style="display: flex;flex-direction: row;justify-content: space-around;">
          <div style="display: flex;flex-direction: column;">
            <el-form-item label="章节名称">
              <el-input v-model="editForm.chapterName" placeholder="章节名称"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="editForm.type" placeholder="请选择类型" @change="getFatherNode"><!-- 使用 @change 监听值的变化 -->
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="4" value="4"></el-option>
                <el-option label="5" value="5"></el-option>
                <el-option label="6" value="6"></el-option>
                <!-- 可以根据需要添加更多选项 -->
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="所属知识点">
              <el-select v-model="editForm.parentId" filterable placeholder="请选择">
                <el-option v-for="item in FatherNode" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item> -->
          </div>

          <div style="display: flex;flex-direction: column;">
            <el-form-item label="专业">
              <el-input v-model="editForm.major" placeholder="专业"></el-input>
            </el-form-item>
            <el-form-item label="介绍">
              <el-input v-model="editForm.introduce" placeholder="介绍"></el-input>
            </el-form-item>
            <el-form-item label="课时">
              <el-input v-model="editForm.classHour" placeholder="课时"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="父节点名称">
          <el-input v-model="editForm.parentId" placeholder="父节点名称"></el-input>
        </el-form-item>


        <!-- <el-form-item label="courseId">
          <el-input v-model="editForm.courseId" placeholder="课程id" ></el-input>
        </el-form-item> -->
        <el-form-item label="备注">
          <el-input type="textarea" v-model="editForm.remark" placeholder="备注"></el-input>
        </el-form-item>
        <!-- <el-form-item label="status">
          <el-input v-model="editForm.status" placeholder="状态" ></el-input>
        </el-form-item>
        <el-form-item label="createTime">
          <el-input v-model="editForm.createTime" placeholder="创建时间" ></el-input>
        </el-form-item>
        <el-form-item label="createBy">
          <el-input v-model="editForm.createBy" placeholder="创建人" ></el-input>
        </el-form-item>
        <el-form-item label="createTimeString">
          <el-input v-model="editForm.createTimeString" placeholder="创建时间字符串" ></el-input>
        </el-form-item>
        <el-form-item label="updateTime">
          <el-input v-model="editForm.updateTime" placeholder="更新时间" ></el-input>
        </el-form-item>
        <el-form-item label="updateTimeString">
          <el-input v-model="editForm.createTimeString" placeholder="更新时间字符串" ></el-input>
        </el-form-item>
        <el-form-item label="state">
          <el-input v-model="editForm.state" placeholder="删除逻辑" ></el-input>
        </el-form-item>
        <el-form-item label="updateBy">
          <el-input v-model="editForm.updateBy" placeholder="修改人" ></el-input>
        </el-form-item>
        <el-form-item label="unitId">
          <el-input v-model="editForm.unitId" placeholder="数据隔离字段" ></el-input>
        </el-form-item> -->
        <el-form-item style="text-align: right;">
          <el-button type="primary" @click="visible = false">取消</el-button>
          <el-button type="danger" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <div class="el-pagination" style="position: absolute;right: 10px;">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="params.pageNum"
        :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </master>
</template>
<script type="text/javascript">
  (function (G) {
    G.vue({
      "usingComponents": {///引入组件
        "master": "/components/Master/Master"///母版组件
      },
      "enablePullDownRefresh": true
    }, {
      data: {
        loading: false,
        params: {
          //分页数据
          pageSize: 10,
          pageNum: 1,
          title: ""
        },
        total: 0,
        //单行列表数据
        rows: [],
        // 编辑表单和新增表单是否显示
        visible: false,
        visibleadd: false,
        // 编辑表单数据
        editForm: {},
        enterprise: [],
        //新增中父节点下拉框数据
        FatherNode: [{
          value: '选项1',
          label: '请先选择类型'
        }, {
          value: '选项2',
          label: '请先选择类型'
        }, {
          value: '选项3',
          label: '请先选择类型'
        }, {
          value: '选项4',
          label: '请先选择类型'
        }, {
          value: '选项5',
          label: '请先选择类型'
        }],
        value: ''
      },
      methods: {
        getFatherNode() {
          // console.log("this.editForm.type"+this.editForm.type);
          G.get('{JAVAURL}/sp-chapter/fatherNode?type=' + this.editForm.type).then(res => {
            if (!res.errorMsg) {
              // 将对应type的返回列表解构成需要的数据格式
              // console.log("res.data",res.data);
              this.FatherNode = res.data.map(item => ({
                value: item.parentId,  // 设置 value 为 parentId
                label: item.chapterName // 设置 label 为 chapterName
              }));
              console.log("this.FatherNode",this.FatherNode);
            }
          })
        },
        edit(row) {
          if (row) {
            this.editForm = row
            // console.log("this.editForm",this.editForm);
            this.visible = true
          } else {
            this.editForm = {}
            this.visibleadd = true
            // alert("没有选择数据")
          }
        },
        save() {
          this.$refs.editForm.validate((valid) => {
            if (valid) {
              // console.log("this.editForm1", this.editForm);

              if (this.editForm.id) {
                G.put('{JAVAURL}/sp-chapter/chapterUpdate', this.editForm).then(res => {
                  if (!res.errorMsg) {
                    this.visible = false//控制表单显示
                    // G.toask('编辑章节成功')
                    this.params.pageNum = 1
                    this.getList()
                  }
                })
              } else {
                G.post('{JAVAURL}/sp-chapter/chapterAdd', this.editForm).then(res => {
                  if (!res.errorMsg) {
                    this.visible = false//控制表单显示
                    // this.visible = true//控制表单显示
                    G.toask('添加章节成功')
                    this.params.pageNum = 1
                    this.getList()
                  }
                })
              }
            }
          })
        },
        delet(row) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // console.log("row",row);
            // console.log("row.id",row.id);

            G.delete('{JAVAURL}/sp-chapter/deleteByid?id=' + row.id)
            this.getList()
            // console.log(typeof row.id);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        sizeChange(pageSize) {
          this.params.pageSize = pageSize;
          this.params.pageNum = 1;
          this.getList();
        },
        currentChange(pageNum) {
          this.params.pageNum = pageNum;
          this.getList();
        },
        searchList() {
          console.log(this.params.title);
          G.get('{JAVAURL}/sp-chapter/detailBytype?type=' + this.params.title).then((res) => {
            // console.log(res);
            this.loading = false;
            this.total = res.data.length;
            this.rows = res.data;
          });
        },
        getList() {
          this.loading = true;
          this.editForm = {};//清空编辑表单内容
          G.get('{JAVAURL}/sp-chapter/list', this.params).then((res) => {
            console.log(res);
            this.loading = false;
            this.total = res.total;
            this.rows = res.rows;
          });
        }
      },
      mounted() {
        this.getList();
      }
    });
  })(Y)
</script>
<style scoped>

</style>